<template>
  <div :id="id" ref="canvas"></div>
</template>
<script>
import { mapState } from 'vuex'
import { mixinDevice } from '@/utils/mixin.js' 
export default {
  mixins: [mixinDevice],
  props: {
    elem: {
      type: Object,
      default() {
        return { width: 150, height: 120 }
      },
      required: false
    }
  },
  data() {
    return {
      id: '1.23452384164.123412415'
    }
  },
  computed: {
    ...mapState({
      sideBar: state => state.app.sidebar.opened
    })
  },
  watch: {
    sideBar(val) {
      this.changePosition(val)
    }
  },
  mounted() {
    this.key()
  },
  methods: {
    createCanvas(str) {
      console.log(this.sideBar, this.elem)
      let can = document.createElement('canvas')
      can.width = this.elem.width
      can.height = this.elem.height
      if (this.device == 'mobile') {
        can.width = 80
        can.height = 80
      }
      let cans = can.getContext('2d')
      cans.rotate((-20 * Math.PI) / 180)
      cans.font = '20px Vedana'
      cans.fillStyle = 'rgba(200, 200, 200, 0.60)'
      cans.textAlign = 'left'
      cans.textBaseline = 'Middle'
      cans.fillText(str, can.width / 3, can.height / 2)

      let div = this.$refs.canvas
      div.style.pointerEvents = 'none'
      div.style.top = '70px'
      if (this.sideBar) {
        div.style.left = '200px'
      } else {
        div.style.left = '90px'
      }
      console.log(this.device)

      div.style.position = 'fixed'
      div.style.zIndex = '100000'
      div.style.width = document.documentElement.clientWidth - 100 + 'px'
      div.style.height = document.documentElement.clientHeight - 100 + 'px'
      div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
      if (this.device == 'mobile') {
        div.style.left = '0px'
        div.style.width = '100vw'
      }
    },
    changePosition(val) {
      let div = this.$refs.canvas
      if (val) {
        div.style.left = '200px'
      } else {
        div.style.left = '90px'
      }
    },
    key(event) {
      document.onkeydown = function() {
        console.log(window.event.returnValue)
        if (window.event.keyCode == 116) {
          window.event.returnValue = false
        }
        console.log(window.event.returnValue)
      }
    }
  }
}
</script>
